<template>
  <div>
    <div @click="show"> <slot></slot></div>
    <ModalPanel
      :visible="visible"
      :width="1200"
      :title="t('添加流程')"
      @submit="submit"
      @close="close"
    >
      <template #left>
        <CategoryTree @select="handleSelect" />
      </template>
      <Selected :list="template.selected" @change="selectedListChecked" />
      <SearchBox @search="searchList" />

      <div class="list-page-box" v-if="template.list.length > 0">
        <TemplateCard
          :class="selectIds.includes(item.id) ? 'picked' : 'not-picked'"
          v-for="(item, index) in template.list"
          :key="index"
          :item="item"
          @click="checked(item)"
        >
          <template #pick>
            <a-checkbox size="small" :checked="selectIds.includes(item.id)" />
          </template>
        </TemplateCard>
        <div class="page-box">
          <a-pagination
            v-model:current="page.current"
            :pageSize="page.pageSize"
            :total="page.total"
            show-less-items
            @change="getList"
        /></div>
      </div>
      <div v-else>
        <EmptyBox />
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue';
  import CategoryTree from '/@bpmn/components/CategoryTree.vue';
  import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
  import { ModalPanel, EmptyBox, SearchBox } from '/@/components/ModalPanel/index';
  import Selected from './Selected.vue';
  import { RelationProcessConfig } from '/@/model/workflow/workflowConfig';
  import { getDesignPage } from '/@/api/workflow/design';
  import { WorkflowPageModel } from '/@/api/workflow/model';
  import { cloneDeep } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const emits = defineEmits(['change']);

  const props = withDefaults(
    defineProps<{
      list: Array<RelationProcessConfig>;
      single: Boolean;
    }>(),
    {
      list: () => {
        return [];
      },
      single: () => {
        return false;
      },
    },
  );
  const visible = ref(false);

  let category = ref('');

  let template: {
    list: Array<WorkflowPageModel>;
    selected: Array<RelationProcessConfig>;
    keyword: string;
  } = reactive({ list: [], selected: [], keyword: '' });

  let page: { current: number; total: number; pageSize: number } = reactive({
    current: 1,
    total: 0,
    pageSize: 9,
  });

  async function show() {
    page.current = 1;
    page.total = 0;
    category.value = '';
    template.selected = [];
    if (props.list.length > 0) {
      template.selected = cloneDeep(props.list).filter((ele) => {
        return ele.id;
      });
    }
    await getList();
    visible.value = true;
  }
  let selectIds = computed(() => {
    if (template.selected && template.selected.length > 0) {
      return template.selected.map((ele: RelationProcessConfig) => {
        return ele.id;
      });
    }
    return [];
  });
  async function getList() {
    try {
      let params = {
        limit: page.current,
        size: page.pageSize,
        category: category.value,
        keyword: template.keyword,
      };
      let res = await getDesignPage(params);
      page.total = res.total;
      template.list = res.list;
    } catch (error) {}
  }
  function submit() {
    emits('change', template.selected);
    close();
  }
  function close() {
    template.list = [];
    visible.value = false;
  }
  function handleSelect(deptId = '') {
    category.value = deptId;
    getList();
  }
  function checked(item: WorkflowPageModel) {
    if (props.single) {
      if (selectIds.value.includes(item.id)) {
        template.selected = [];
      } else {
        template.selected = [
          {
            name: item.name,
            id: item.id,
            code: item.code,
            definitionKey: item.definitionKey,
          },
        ];
      }
    } else {
      if (selectIds.value.includes(item.id)) {
        template.selected = template.selected.filter((ele) => {
          return ele.id != item.id;
        });
      } else {
        template.selected.push({
          name: item.name,
          id: item.id,
          code: item.code,
          definitionKey: item.definitionKey,
          processStatus: 0, //流程状态
          processAuth: 0, //任务权限
        });
      }
    }
  }
  function selectedListChecked(item: RelationProcessConfig) {
    template.selected = template.selected.filter((ele) => {
      return ele.id != item.id;
    });
  }
  function searchList(searchKeywords: string) {
    template.keyword = searchKeywords;
    console.log('searchKeywords: ', searchKeywords);
    getList();
  }
</script>
